<template>
	<view>
		<view class="box-list">
			<view class="page-list" v-if="is_kol">
				<view class="tips">专场包含车系如下：</view>
				<view class="list-item" v-for="item in configList" :key="item.hid">
					<view class="left">
						<img  :src="item.cover" alt="">
					</view>
					<view class="middle">
						<view class="name">{{item.name}}</view>
						<view class="price">指导价:{{item.guide_price}}</view>
					</view>
					<view class="right" v-if="item.is_show_ask_price">
						<button class="btn" >询底价</button>
					</view>
				</view>
			</view>
			
		</view>
		<view class="page" v-if="!is_kol">
			<view class="tab-nav">
				<view class="tab">
					<view  :class="isActive == item.id ? 'tab-item active': 'tab-item'" v-for="item in tabList" :key="item.id" @click="tabChange(item.id)">{{item.name}}</view>
				</view>
			</view>
			
				<view :class="secondChoice.length > 0 ? 'listtop list': 'list'" id="scroll-box" >
					<view class="li" v-for="item in NewCarList" :key="item.hid" @click="searchPrice(item)">
						<image :src="item.cover"></image>
						<view class="info">
							<view class="name">{{item.name}}</view>
							<view class="price">指导价：{{item.guide_price}}</view>
						</view>
						<view class="btn-box">
							<view class="red">{{item.hidden_price}}</view>
							<button class="btn" >获取报价单</button>
						</view>
					</view>
				</view> 
		
			
			
			<view class="nothing" v-if="isNoting">
				<img src="../../static/image/nothing.png" alt="" mode="widthFix">
				<view class="text">暂无内容</view>
			</view>
			
			<uni-popup ref="modalPopup">
		
				<view class="mask">
					<image class="close" src="../../static/image/guanbi.png" @click="closeMask"></image>
					<view class="top">
						<view class="blue">{{carInfo.hidden_price}}</view>
						<view class="tips">获取本地最新报价， 包含各项费用明细</view>
					</view>
					<view class="guding">
						<view class="item-jia" v-for="item in gudingList" :key="item.label">
							<view class="top-name">{{item.label}}</view>
							<view class="x">xxx</view>
						</view>
					</view>
					
					<view class="item-list">
						
						<view class="item">
							<view class="left">意向车系</view>
							<view class="middle">
								<view class="title">{{carInfo.name}}</view>
							</view>
						</view>
						
						<view class="item">
							<view class="left">购车城市</view>
							
							<view class="middle">
								<picker title="选择城市" mode="multiSelector" range-key="name" :range="regionList" :value="provinceCityIndex" mask-style="background: #000; " @change="regionListChange" @cancel="cancelRegion" @columnchange="regionListColumnchange">
									<view class="picker-box" v-if="isLocation">
										{{ newProvinceCityList[provinceCityIndex[0]] ? newProvinceCityList[provinceCityIndex[0]].name : '请选择购车城市' }}
										{{ newProvinceCityList[provinceCityIndex[0]].citys ? newProvinceCityList[provinceCityIndex[0]].citys[provinceCityIndex[1]].name : '' }}
									</view>
									<view class="picker-box" v-if="!isLocation">
										{{provincename}}
									</view>
								</picker>
							</view>
							<view class="right"><img src="../../static/image/right.png" alt=""></view>
						</view>
						
						<view class="item" v-if="dea_is_show" @click="showModal">
								<view class="left">经销商</view>
								<view class="middle" style="font-size: 32rpx;">{{dealerName}}</view>
								<view class="right"><img src="../../static/image/right.png" alt=""></view>
						</view>
							
						<view class="item" v-if="!isEmpower">
								<view class="left">手机号</view>
								
								<input name="input" class="middle" placeholder="请输入手机号" placeholder-style="color:#BEC0C4;font-size: 32rpx;" v-model="phone" maxlength="11" type="number"  :clueType="clueType" @input="inputChange" ></input>
								<view class="right" v-if="phone == '' "><button class="btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumbers">获取手机号</button></view>
						</view>
							
							
							<view class="item" v-if="!isShow">
								<view class="left">验证码</view>	
								<input class="middle" type="number" v-model="sms_code" placeholder="请输入验证码" placeholder-style="color:#BEC0C4;font-size: 32rpx;"></input>
								<view class="right">
									<button class="btn" @click="getSMS" v-if="!isSMS">获取验证码</button>
									<button class="btn" @click="getSMS" v-if="isSMS">{{countdown}}s</button>
								</view>
							</view>
							
							
						</view>
						<view class="button-box">
							<button class="btn-price" v-if="isEmpower"  open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"> 授权手机号领取报价单</button>
							<button class="btn-price" v-if="!isEmpower" @click="clickForm"> 立即领取报价单</button>
							<view class="tips-text">提交信息获取最新优惠，提交即视为同意<view style="color:#3075FE" @click="jumpAgreement">《隐私政策》</view></view>
						</view>
						
					</view>
					
			</uni-popup>
			
			<uni-popup ref="popup"  mask-background-color="rgba(0,0,0,.4)" safe-area="true">
				<view class="dea-box">
					<view class="cancel-title">
						<view class="cancel" @click="closeModal">取消</view>
						<view class="title">选择经销商</view>
					</view>
					<view class="list-box">
						<view class="list-item" v-for="item in dealerList" :key="item.hid" @click="selectDealer(item)">
							<view class="title">{{item.name}}</view>
							<view class="address">
								
								<view class="distance" v-if="item.distance != ''">{{item.distance}} | {{item.address}}</view>
								<view class="distance" v-if="item.distance == ''">{{item.address}}</view>
						
							</view>
							<uni-icons v-show="item.isSelected == 1" class="icon" type="checkmarkempty" size="20"></uni-icons>
						
						</view>
					</view>
				</view>
			</uni-popup>
			
			<uni-popup type="center" ref="successPopup" :mask-click="false">
				<view class="modal">
					<view class="title">温馨提示</view>
					<view class="content">提交成功，我们会尽快与您联系！</view>
					<view class="btn" @click="jumpHome">知道了</view>
				</view>
			</uni-popup>
		</view>
		
		<view class="mask-network" v-if="networkConnected">
			<view class="net-box">
				<img mode="widthFix" src="../../static/image/qiu.jpg" alt="">
				<view class="text">抱歉，页面加载失败了...</view>
				<view class="btn" @click="reloading">重新加载</view>
			</view>
		</view>
	</view>
</template>

<script>
	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	
	import {buryReport} from '../../utils/buryReport.js'
	import {deliverClickCallback} from '../../utils/deliverClickCallback.js'
	export default {
		data(){
			return {
				configList: [],
				is_kol: false,
				tabList: [],
				isActive: '',
				tabplanList: [],
				mount_log_hid: '',
				carData:{},
				newProvinceCityList: [],
				regionList: [],
				provinceCityIndex: [0, 0],
				phone: '',
				province_id: '',
				city_id: '',
				carId: '',
				dealerId: '',
				dealerName: '请选择意向经销商',
				loc_lng: '',
				loc_lat: '',
				dealerList: [],
				code: '',
				countdown: 60,
				timeClock: null,
				isSMS: false,
				sms_code: '',
				cityName: '',
				provincenName: '',
				carHid: '',
				mount_log_hid: '',
				pages:'', //页面地址，
				pageParams: '', // 页面参数
				log_detail_hid: '',
				page_session_id: '',
				hide: 1,
				conversionTarget: 1,
				clueType: 1,
				text: '',
				isShow: true,
				phone_sign: '',
				isLocation: false,
				isEmpower: true,
				isClick: false,
				submitType: '',
				reqArgs: {},
				special_hid: '',
				carName: '',
				imageUrl: '',
				carList: [],
				isShowList: true,
				dea_is_show: null,
				toView: '',
				isLoading: true,
				scrollLeft: '0',
				Iheight: '',
				Iwidth: '',
				networkConnected: false,
				pageKey: 1,
				ask_price_summary: '',
				ask_price_num: '',
				isCheckShow: false,
			
				secondChoice: [],
				isPrice: true,
				NewCarList: [],
				carInfo:{},
				brand_ids:[],
				price_id: 0,
				level_ids: [],
				energy_ids:[],
				isNoting: false,
				pushArr: [],
				gudingList: [
					{label: '落地价', value: '1' },
					{label: '裸车价', value: '2' },
					{label: '必要花费', value: '3' },
					{label: '商业保险', value: '4' }
				],
				provincename: '请选择购车城市',
				appIdNum: '',
				
			}
		},
		async onLoad(options) {
			
			//更换线索组件id
			const accountInfo =  uni.getEnvInfoSync()
			this.appIdNum = accountInfo.microapp.appId
			
			
			uni.showLoading({
				title:'加载中...'
			})
			
			console.log('网络监测')
			// 2g或没有网时
			let that = this
			uni.getNetworkType({
				success(res) {
					that.networkConnected = res.networkType == 'none' || res.networkType == '2g'
					if(res.networkType == 'none' ) {
						uni.hideLoading()
					}
				}
			})
						
			console.log(options, '领优惠')
			this.reqArgs = options
			this.mount_log_hid = options.mount_log_hid ?  options.mount_log_hid : ''
		
			this.special_hid = options.special_hid
			this.getPageInfo()
		
			
			this.phone = uni.getStorageSync('empower_phone')? uni.getStorageSync('empower_phone') : ''
			this.phone_sign = uni.getStorageSync('phone_sign')? uni.getStorageSync('phone_sign') : ''
		
			if(this.phone != '') {
				this.isEmpower = false
			}
			
			// 广告访问页面数据上报
			deliverClickCallback("page_view", this.reqArgs)
			
		
			setTimeout(() => {
				console.log(uni.getStorageSync('isNetwork'), '定时器')
				if(uni.getStorageSync('isNetwork')) {
					uni.hideLoading()
					this.networkConnected = true
				}
			}, 6000)
			
			
			this.getTabList()
			// this.getNewCarList()
		},
		
		
		
		async onShow() {
			
			console.log('onShow')  
			tt.hideHomeButton()
			
		},
		async onHide() {
			this.hide = 0
			// // 埋点 上报
		},
		methods: {
			//配置详情
			getPageInfo() {
				request.http({
					url:Api.page_info,
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token')
					},
					type: 'GET',
					data: {
						mount_log_hid: this.mount_log_hid
					}
				}).then(res => {
				
					console.log(res.data, '详情')
					this.configList = res.data.style_list
					this.is_kol = res.data.is_kol
					
					if(this.is_kol) {
						uni.hideLoading()
					}
				})
			},
			// 获取经纬度 
			onGetLocationEvent() {
				let _this = this
					//用户授权经纬度
				return	new Promise((resolve, reject) => {
					tt.getLocation({
					success(res) {
						console.log(res, "经纬度")
						_this.loc_lng = res.longitude;
						_this.loc_lat = res.latitude;
						_this.isLocation = true
						resolve('success')
						 _this.getProvince()
						 _this.provincename = ''
						 // _this.getDealer()
						
					},
					fail(err) {
						console.log(err, "err")
						_this.isLocation = false
						resolve('fail')
						// _this.getDealer()
						_this.getProvince()
						_this.dealerName = '请选择意向经销商'
					},
					});
				})
			},
			getProvince (){
				request.http(
				{
					url: Api.province_city,
					type: 'GET',
					header: {
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {
						loc_lng: this.loc_lng,
						loc_lat: this.loc_lat,
						car_style_hid: this.carInfo.hid
					},
					}).then(result=>{
						console.log(result, "省份城市")
						this.newProvinceCityList = result.data.list
						let _privateList = this.newProvinceCityList 
						let _cityList = _privateList[0].citys
						this.regionList = [_privateList, _cityList]
						this.province_id = _privateList[0].hid
						this.city_id = _privateList[0].citys[0].hid
						this.cityname = _privateList[0].citys[0].name
						uni.hideLoading()
						if(this.isLocation) {
							this.getDealer()
						}
					})
			},
			regionListChange ({detail}){
				this.provinceCityIndex = [detail.value[0],detail.value[1]]
				this.province_id = this.regionList[0][detail.value[0]].hid
				this.city_id=  this.regionList[1][detail.value[1]].hid
				this.provincename = ''
				this.cityname =this.regionList[1][detail.value[1]].name
				this.getDealer()
				this.isLocation = true
			},
			// 列更新事件
			async regionListColumnchange({ detail: { column, value } }) {
				console.log("3333")
				console.log(this.regionList)
				let citylist = []
				//省份更新
				if(column == 0){
					citylist = this.newProvinceCityList[value].citys
					this.regionList = [this.newProvinceCityList, citylist]
				}
			},
			cancelRegion() {
				console.log("取消")
				let citylist = this.newProvinceCityList[this.provinceCityIndex[0]].citys
				this.regionList = [this.newProvinceCityList, citylist]
			},
			// 获取经销商
			getDealer () {
				
				request.http(
				{
					url: Api.dealer_list,
					type: 'GET',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token'),
					},
					data: {
						city_id: this.city_id,
						loc_lng: this.loc_lng,
						loc_lat: this.loc_lat,
						car_style_hid: this.carInfo.hid
					},
					}).then(result=>{
						result.data.list.map((item, index) => {
							item.isSelected = 0
							if(index == 0) {
								item.isSelected = 1
							}
						})
						
						this.dealerList = result.data.list
						
						
						if(this.dealerList.length > 0) {
							this.dealerName = result.data.list[0].name
							this.dealerId = result.data.list[0].hid
						} else {
							this.dealerName = "暂无经销商"
							this.dealerId = ''
						}
					})
			},
			//选择经销商
			selectDealer(val) {
				this.isLocation = true
				this.dealerList.map(item => {
					if(val.hid == item.hid){
						item.isSelected = 1
					} else {
						item.isSelected = 0
					}
				})
				
				this.dealerId = val.hid
				this.dealerName = val.name
				this.$refs.popup.close()
			
			},
			// 获取手机号
			onGetPhoneNumbers(e) {
			if(e.detail.errNo != 10200) {
				request.http(
				{
					url: Api.decrypt_phone,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						'token':uni.getStorageSync('token'),
					},
					data: {
						encrypted_data: e.detail.encryptedData,
						iv: e.detail.iv,
					},
					}).then(result=>{
						this.phone = result.data.encode_phone
						this.phone_sign = result.data.phone_sign
						uni.setStorageSync('empower_phone', this.phone)
						uni.setStorageSync('phone_sign', this.phone_sign)					
					})
				}	
			},
			onGetPhoneNumber (e) {
				console.log(e, '3')
				this.isShow = true
			
				
				if(e.detail.errNo != 10200) {
					request.http(
					{
						url: Api.decrypt_phone,
						type: 'POST',
						header: {
							// 'content-type': 'application/x-www-form-urlencoded',
							'token':uni.getStorageSync('token'),
						},
						data: {
							encrypted_data: e.detail.encryptedData,
							iv: e.detail.iv,
						},
						}).then(result=>{
							this.phone = result.data.encode_phone
							this.phone_sign = result.data.phone_sign
							uni.setStorageSync('empower_phone', this.phone)
							uni.setStorageSync('phone_sign', this.phone_sign)
							
							
							this.formClick(1)
							
						})
				} else {
					console.log('拒绝')
					this.isEmpower = false
					// this.formClick()
				}
				
			},
			
			inputChange (e) {
				console.log(e, '手机号')
				if(this.phone.length == 11){
					this.isShow = false
					this.phone_sign = ''
				} else if(this.phone.length == 0){
					this.isShow = true
					this.phone_sign = ''
				}
				
			},
			showModal () {
				if(this.dealerList.length != 0) {
					this.$refs.popup.open('bottom')
				}
			},
			closeModal () {
				this.$refs.popup.close()
				
			},
			
			clickForm() {
				this.formClick(1)
			},
			
			
			formClick (val) {
			if(val != 1) {
				console.log('不走')
				return
			}
				
				this.isEmpower = false
					
			if(this.provincename == '请选择购车城市') {
				uni.showToast({
					title:'请选择购车城市',
					icon: "none"
				})
				return
			}
			
			if(this.dea_is_show  && this.dealerId == '') {
				uni.showToast({
					title:'请选择意向经销商',
					icon: "none"
				})
				return
			}
			if(this.phone == '') {
				uni.showToast({
					title:'请输入手机号',
					icon: "none"
				})
				return
			}
			
			
			if( !this.isShow && this.sms_code == '') {
				uni.showToast({
					title:'请输入验证码',
					icon: "none"
				})
				return
			}
			let obj = {
				adid: this.reqArgs.adid,
				creativeid: this.reqArgs.creativeid,
				creativetype: this.reqArgs.creativetype,
				clickid: this.reqArgs.clickid,
			}
			console.log(this.carHid, "车系id")
			
			// this.isDots = true
			request.http(
			{
				url: Api.leave_clue,
				type: 'POST',
				header: {
					// 'content-type': 'application/x-www-form-urlencoded',
					'token':uni.getStorageSync('token'),
				},
				data: {
					cate: 7,
					province_id: this.province_id,
					city_id: this.city_id,
					style_hid: this.carInfo.hid,
					dea_hid: this.dealerId,
					phone: this.phone_sign == '' ? this.phone : '' ,
					sms_code: this.sms_code,
					mount_log_hid: this.mount_log_hid ? this.mount_log_hid : '' ,
					phone_cate: this.isShow ? 1 : 2,
					phone_sign: this.phone_sign,
					dy_ad: obj
				},
				}).then(result=>{
					if(result.data.is_send_sms) {
						console.log('成功')
						deliverClickCallback("form" , this.reqArgs)
					}
					// this.$refs.successPopup.open('center')
					this.isEmpower = false
					this.sms_code =''
					uni.navigateTo({
						url:`/subPackage/successPage/quotation?city_id=${this.city_id}&style_hid=${this.carInfo.hid}&city_name=${this.cityname}&special_hid=${result.data.special_hid}&douyin_name=${result.data.nickname}&douyin_num=${result.data.account_num}&phone=${result.data.phone}&is_send_sms=${result.data.is_send_sms}&kol_id=${result.data.kol_id}`
					})
				}).catch(err => {
					console.log(err, "333")
				})
			},
			
			
			jumpHome () {
				this.$refs.modalPopup.close()
				this.$refs.successPopup.close()
					
			},
			getSMS(){
				if(this.phone == '') {
					uni.showToast({
						title:'请输入手机号',
						icon: "none"
					})
					return
				}
				
				request.http(
				{
					url: Api.getCode,
					type: 'POST',
					header: {
						// 'content-type': 'application/x-www-form-urlencoded',
						//  'token':uni.getStorageSync('token'),
					},
					data: {
						cate: 7,
						phone: this.phone
						},
					}).then(result=>{
						this.setTime()
						this.isSMS = true
					})
			},
			setTime(val) {
				   let that=this;
				   
					if(this.countdown==0){
					this.countdown=60;
					clearTimeout(that.timeClock)
					this.isSMS = false
					}else{
					this.countdown--;
					this.timeClock=setTimeout(()=>{
					that.setTime();   
					},1000)
				   }
			},
			jumpAgreement() {
				console.log(444)
				uni.navigateTo({
					url:'/subPackage/personal/agreement'
				}) 
			},
			reloading() {
				this.networkConnected = false
				
				uni.showLoading({
					title: '加载中...',
					duration: 3000,
					success:() =>{
					 
						const currentPages = getCurrentPages();
						console.log(currentPages, 'currentPages')
						uni.redirectTo({
							url: currentPages[currentPages.length - 1]['$page']['fullPath'],
						});		
					console.log(currentPages[currentPages.length - 1]['$page']['fullPath'], '路径2')
					}
					
				})
			
			},
			getNewCarList() {
				request.http(
				{
					url: Api.new_car_list,
					type: 'POST',
					header: {
					},
					data: {
						special_hid: this.special_hid,
						brand_ids: this.brand_ids,
						price_id: this.price_id,
						level_ids: this.level_ids,
						energy_ids: this.energy_ids
						},
					}).then(result=>{
						if(result.data.list.length == 0) {
							this.isNoting = true
							this.NewCarList = []
						} else {
							this.NewCarList = result.data.list	
							this.isNoting = false
						}
						const query = uni.createSelectorQuery().in(this);
						query.select('#scroll-box').boundingClientRect(data => {
						  if (data) {
						    // 使用uni-app的通用API设置滚动位置
						    uni.pageScrollTo({
						      scrollTop: 0, // 假设你想要滚动到距离顶部100px的位置
						      duration: 10 // 动画时长
						    });
						  }
						}).exec();
						uni.hideLoading()
					})
			},
			getTabList () {				
				request.http(
				{
					url: Api.new_brand_filter,
					type: 'GET',
					header: {
					},
					data: {
						special_hid: this.special_hid
						},
					}).then(result=>{
						this.isActive = result.data.list[0].id
						this.brand_ids = [result.data.list[0].id]
						this.tabList = result.data.list
						this.getNewCarList()
					})
				
			},
			tabChange(id) {
				this.isActive = id
				this.brand_ids = [id]
				this.getNewCarList()
			},
			
			searchPrice(val) {
				this.carInfo = val
				if(val.dea_is_show != undefined) {
					this.dea_is_show = val.dea_is_show
				}
				
			
				this.$refs.modalPopup.open('bottom')
				console.log('点击')
				// this.getProvince()】、
				
				if(this.isLocation) {
					let citylist = this.newProvinceCityList[this.provinceCityIndex[0]].citys
					this.regionList = [this.newProvinceCityList, citylist]
					this.getDealer()
				}  else {
					this.onGetLocationEvent()
				}
				// this.provinceCityIndex= [0, 0]
				console.log(this.regionList, "#33")
			},
			closeMask () {
				this.$refs.modalPopup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		height: 100vh;
	}
	.tab-nav {
		width: 100%;
		background: #fff;
		position:fixed;
		top:0;
		left: 0;
		z-index: 99;
		.tab {
			width: 100%;
			height: 101rpx;
			background: #fff;
			display: flex;
			align-items: center;
			overflow-y: hidden;
			overflow-x: auto;
			padding-left:10rpx ;
			.tab-item {
				flex-shrink: 0;
				padding: 30rpx 16rpx;
				font-weight: 400;
				color: #6E7175;
				font-size: 32rpx;
				
			}
			.active {
				font-size: 36rpx;
				font-weight: 600;
				color: #222526;
				position: relative;
				&::before {
					content: "";
					position: absolute;
					bottom: 14rpx;
					left: 50%;
					transform: translate(-50%, 0);
					width: 29rpx;
					height:6rpx ;
					background-image: url(../../static/image/active.png);
					background-size: 100% 100%;
				}
			}
			
		}
	}
	.select-box{
		width: 100%;
		background: #fff;
		position:fixed;
		top:0;
		left: 0;
		z-index: 99;
		.tab{
			width: 100%;
			height: 112rpx;
			display: flex;
			justify-content: space-around;
			.tab-item{
				
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.title {
					font-size: 32rpx;
					color: #222526;
				}
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
			
		}
		
		.selectAll {
			width: 100%;
			display: flex;
			height: 104rpx;
			padding: 0 32rpx ;
			box-sizing: border-box;
			.li-box {
				flex:1 ;
				display: flex;
				overflow-y: auto;
				.select-li {
					flex-shrink: 0;
					padding: 0 24rpx;
					box-sizing: border-box;
					height: 72rpx;
					background: #3075fe1a;
					border-radius: 4rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 32rpx;
					.name {
						font-size: 28rpx;
						color: #3075FE;
					}
					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
			
			.reset {
				width: 80rpx;
				height: 72rpx;
				font-weight: 500;
				font-size: 32rpx;
				background: #fff;
				text-align: center;
				line-height: 72rpx;
				color: #3075FE;
			}
		}
		.tabplan{
			width: 100%;
			height: 100vh;
			position: fixed;
			top:112rpx;
			left: 0;
			z-index: 99;
			background: #00000066;
			.mask-box {
				width: 100%;
				padding: 0 32rpx 20rpx 32rpx;
				box-sizing: border-box;
				background: #fff;
				.item-box {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					flex-direction: row;
					
					.tab-item {
						width:23%;
						height: 72rpx;
						background: #F6F7FC;
						border-radius: 4rpx;
						text-align: center;
						line-height: 72rpx;
						font-size: 28rpx;
						color: #222526;
						margin-right: 14.3rpx; 
						margin-bottom: 14.3rpx;
					}
					.tab-active {
						color: #3075FE;
					}
				}
				
				.chekBtn{
					width: 100%;
					height: 96rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-weight: 500;
					font-size: 32rpx; 
					color: #FFFFFF;
					text-align: center;
					line-height: 96rpx;
					margin: 20rpx auto 0;
				}
				
			}
		}
	}
	
	.list{
		width: 100%;
		// height: 100vh;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		// overflow-y: auto;
		margin-top: 104rpx;
		.li{
			width: 100%;
			height: 196rpx ;
			border-radius: 8rpx;
			background: #fff;
			display: flex;
			padding: 24rpx 16rpx;
			box-sizing: border-box;
			margin-bottom: 16rpx;
			image {
				width: 200rpx;
				height: 148rpx;
			}
			.info{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 25rpx 0;
				margin-left: 16rpx;
				box-sizing: border-box;
				height: 100%;
				flex: 1;
				.name{
					width:244rpx ;
					font-weight: 500;
					font-size: 34rpx;
					color: #222526;
				    white-space: nowrap; 
				    overflow: hidden; 
				    text-overflow: ellipsis; 
				}
				.price {
					font-size: 24rpx;
					color: #6E7175;
				}
			}
			.btn-box {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				margin-top: 8rpx;
				.btn {
					width: 152rpx;
					height: 64rpx;
					background: #3075FE;
					border-radius: 4rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					padding: 0;
				}
				.red {
					font-weight: 500;
					font-size: 32rpx;
					color: #FF3322;
					margin-bottom: 15rpx;
				}
			}
		}
	}
	.listtop{
		margin-top: 218rpx;
	}
	
	.mask {
		width: 100%;
		background: #fff;
		padding:24rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 8rpx 8rpx 0 0;
		.close {
			width: 56rpx;
			height: 56rpx;
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}
		.top{
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 60rpx;
			margin-bottom: 50rpx;
			border-radius: 8rpx 8rpx 0 0;
			.blue{
				font-weight: 600;
				font-size: 48rpx;
				color: #3075FE;
				margin-bottom: 16rpx;
			}
			.tips {
				font-size: 24rpx;
				color: #6E7175;
			}
		}
		
		.guding {
			width: 100%;
			height: 116rpx;
			display: flex;
			align-items: center;
			background: #F6F7FC;
			border-radius:0rpx 0rpx 8rpx 8rpx;
			margin-bottom: 30rpx;
			.item-jia:last-child {
				border-right: none;
			}
			.item-jia {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				border-right: 1rpx solid #E6E8F2;
				margin-top: 10rpx;
				.top-name {
					font-weight: 400;
					font-size: 28rpx;
					color: #6E7175;
				}
				.x {
					font-weight: 500;
					font-size: 32rpx;
					color: #FF3322;
				}
			}
		}
		.item-list {
			margin-bottom: 40rpx;
			.item{
				width: 100%;
				height: 98rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #DCDDE0;
				.left {
					font-size: 28rpx;
					color: #6E7175;
					width:120rpx;
					
				}
				.middle {
					flex: 1;
					padding-left: 48rpx;
					font-size: 32rpx;
					color: #222526;
					white-space: nowrap;
					overflow: hidden; 
					text-overflow: ellipsis; 
					.title{
						font-size: 32rpx;
						color: #222526;
					}
				}
				.right{
					img {
						width: 43rpx;
						height: 43rpx;
						margin-top: 25rpx;
					}
					.btn {
						font-weight: 400;
						color: #3075FE;
						font-size:32rpx;
						background: none;
						padding: 0;
					}
					button::after{ border: none;  }
				}
			}
		}
		
		.button-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.btn-price {
				width: 692rpx;
				height: 87rpx;
				background: #3075FE;
				border-radius: 4rpx;
				font-weight: 400;
				color: #FFFFFF;
				font-size: 29rpx;
				line-height: 80rpx;
				margin-bottom: 21rpx;
				line-height: 87rpx;
			}
			.tips-text {
				font-weight: 400;
				color: #6E7175;
				font-size: 24rpx;
				display: flex;
			}
		}
	}
	
	.dea-box {
		width: 100%;
		height: 950rpx;
		overflow-y: auto;
		background: #FFFFFF;
		padding:0 29rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.cancel-title {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 29rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #DCDDE0;
	
			.cancel {
				font-weight: 400;
				color: #222526;
				font-size: 29rpx;
			}
			.title {
				flex: 1;
				text-align: center;
				font-weight: 500;
				color: #222526;
				font-size: 33rpx;
			}
		}
		.list-box {
			width: 100%;
			overflow-y: auto;
			.list-item {
				width: 100%;
				padding-top: 20rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				
				position: relative;
				
				.icon {
					position:absolute;
					top:40%;
					right: 20rpx;
					transform: translate(0, -40%);
				}
				.title {
					font-weight: 500;
					color: #222526;
					font-size: 29rpx;
					// margin-bottom: 15rpx;
					
				}
				.address {
					display: flex;
					font-weight: 400;
					font-size: 22rpx;
					color: #6E7175;
					border-bottom: 2rpx solid #DCDDE0;
					padding-bottom:23rpx ;
					padding-right:100rpx;
					.gang {
						margin: 0 10rpx;
					}
					.distance {
					}
					
				}
			}
		}
		
	}
	
	.nothing {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 217rpx;
		img {
			width: 271rpx;
		}
		.text {
			color: #666666;
			font-size: 29rpx;
		}
	}
	.mask-network {
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		left: 0;
		.net-box {
			width: 543rpx;
			height: 598rpx;
			background: #FFFFFF;
			border-radius: 7rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			img {
				width: 299rpx;
			}
			.text {
				font-size: 29rpx;
				font-weight: 400;
				color: #021615;
				margin-bottom: 57rpx;
			}
			.btn {
				width: 217rpx;
				height: 72rpx;
				background: #3075FE;
				border-radius: 4rpx;
				font-size: 27rpx;
				line-height: 72rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	
	.box-list {
		background: #F5F9FC; 
		.method-box {
			padding: 0 21rpx;
			box-sizing: border-box;
			margin-top: 21rpx;
			.mount-method {
				border-radius: 7rpx;
				height: 109rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				font-size: 31rpx;
				margin-bottom: 21rpx;
				box-sizing: border-box;
				padding: 0 21rpx;
				box-sizing: border-box;
				.picker-view {
					color: #6E7175;
					font-size: 27rpx;
					display: flex;
					align-items: center;
				}
				.right {
					display: flex;
					align-items: center;
					.text{
						font-size: 27rpx;
						font-weight: 400;
						color: #6E7175;
					}
				}
			}
		}
		
		
		.page-list {
			height: 100vh;
			font-size: 31rpx;
			margin-top: 20rpx;
			padding: 0 21rpx;
			box-sizing: border-box;
			.tips {
				font-size: 25rpx;
				font-weight: 400;
				color: #6E7175;
				padding-bottom:28rpx;
			}
			.list-item {
				width:100%;
				height: 178rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				padding: 0 15rpx;
				box-sizing: border-box;
				.left {
					height: 100%;
					display: flex;
					align-items: center;
					img {
						width: 199rpx;
						height: 134rpx;
						
					}
				}
				.middle {
					height: 100%;
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content:center;
					.name {
						font-size: 31rpx;
						font-weight: 500;
						color: #222526;
						margin-bottom: 18rpx;
					}
					.price {
						font-size: 22rpx;
						font-weight: 400;
						color: #6E7175;
					}
				}
				
				.right {
						.btn{
							width: 137rpx;
							height: 58rpx;
							background: #3075FE;
							border-radius: 4rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #FFFFFF;
							line-height: 58rpx;
						}
					}
			}
		}
	}
	.modal {
		width: 551rpx;
		background: #fff;
		border-radius: 7rpx;
		padding: 28rpx 0 53rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		.title {
			font-weight: 500;
			color: #021615;
			font-size: 33rpx;
			margin-bottom: 28rpx;
		}
		.content{
			font-weight: 400;
			color: #021615;
			font-size: 29rpx;
			margin-bottom: 57rpx;
		}
		.btn {
			width: 196rpx;
			height: 72rpx;
			background: #3075FE;
			border-radius: 4rpx;
			font-weight: 400;
			color: #FFFFFF;
			font-size: 27rpx;
			line-height: 72rpx;
			text-align: center;
		}
	}
</style>